
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册/登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <style>
        .empty {
            text-align: center;
            padding: 50px 0;
        }
        body{
          padding: 0;
          margin: 0;
          background-image: url(../image/login-3.jpg);
          background-repeat: no-repeat;
          background-size: 100%;

        }

        a{
        	 text-decoration:none;
        	 color: #000;
        }
        a:hover{
        	text-decoration: underline;
        }
        .top{
        	width:100%;
        	height: 40px;
        	margin: 0px auto 0px;
        	color:#000;
        	border:0px;
        	display: block;
        	text-align: center;
        }
        .leftreturn{
          position: absolute;
          left:0;
          z-index: 5;
          background-image: url("../image/leftreturn.png");
          background-position: 0px 0px;
          width:25px;
          height:25px;
          margin:7.5px 0;
        }
        .top-title{
          line-height: 40px;
          font-size: 20px;
        }
        .register_cont{
        	width: 100%;
        	height: auto;
        	margin:0px auto;
        	padding: 0px;
        }

        .register_cont table{
          width: 100%;
        	height: auto;
        	padding: 0px;
        	font-size: 16px;
        	//border:1px solid red;
        }

        .mui-password{
          width: 60%;
          padding: 3px;
          font-size: 18px;
          border-bottom: 1.5px solid #57a3f3;
          margin:5px auto;
          height:35px;
          line-height: 35px;
          background-image: url(../image/密码.png);
          background-repeat: no-repeat;
        }
        .mui-username{
          width: 60%;
          padding: 3px;
          font-size: 18px;
          border-bottom: 1.5px solid #57a3f3;
          margin:5px auto;
          height:35px;
          line-height: 35px;
          background-image: url(../image/用户名.png);
          background-repeat: no-repeat;
        }
        .capital{
            width:80%;
            outline: none;
            font-size: 16px;
            line-height: 35px;
            display: inline-block;
            padding-left: 45px;
            height:20px;
        }
        .reg_submit{
          border: 1px;
          border-radius: 8px;
          background-color: #b0c4b9;
          color: #f1ecdd;
          font-weight: bold;
          padding: 10px 15px;;
        }
        input{
          border:0;
          outline: none;
        }
    </style>
</head>

<body>
  <div class="top">
    <i class="leftreturn"></i>
    <h1 class="top-title">注册</h1>
  </div>
    <div class="empty">

      <br>
        <h2>注册页面</h2>
        <a href="javascript:;" onclick="fanhui();" style="margin:10px 0;">跳过注册->进入APP</a>
        <div class="register_cont">
        					<div align="center">
        						<table align="center">
        							<form>
        								<tr>
        									<td>

                            <div class="mui-username">
                              <input type="text" name="username" id="username" placeholder="请输入用户名" class="capital mui-input-clear">
                            </div>
        								</tr>
        								<tr>
        									<td>
                            <div class="mui-password">
                            <input type="password" name="password" id="password" placeholder="请输入密码" class="capital mui-input-clear">
                            </div>
                          </td>
                        </tr>
        								<tr>
        									<td>
                            <div class="mui-password">
                            <input type="password" name="password2" id="password2"  placeholder="请输入密码"
                             class="capital mui-input-clear">
                          </div>
                          </td>
        								</tr>
        								<tr>
        									<td align="center" colspan="2" style="height:50px;">
        										<input type="submit" value="注册" value="true" class="reg_submit" onclick="register_submit();">
                            &nbsp;&nbsp;&nbsp;&nbsp;
        										<input type="reset" name="重置">
        									</td>
        								</tr>

                        <tr >
        									<td  align="center">
        										<a href="javascript:;" onclick="open_login();" style="margin-top:10px;">已注册，请登录</a>
        									</td>
        								</tr>

        							</form>

        						</table>

        					</div>

        </div>




    </div>
</body>
</html>

<script type="text/javascript">




        //注册提交
        function register_submit(){
          var password = document.getElementById('password').value;
          var password2 = document.getElementById('password2').value;
          var username = document.getElementById('username').value;
          if(password != password2){
              alert('两次输入的密码不一致，请重新输入！');
          }else if(password == '' || password2 == '' || username ==''){
              alert('请输入用户名和密码！')
          }else{
              api.ajax({
        		    url:'php/register.php?username='+username+'&password='+password, //DISCUZ端php查询语句，以JSON输出
        		    dataType: 'json'
        	    },function(ret,err){
                alert('注册成功！点击确定开始登录');
                register_database();
              });
          }
        }

        //注册连接数据库
        function register_database(){

          var model = api.require("model");
          model.config({
            appId:'A6032422409194',
            appKey:'808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44',
            host:'https://d.apicloud.com'
          });

          //获取用户账号密码的值
          var password = document.getElementById('password').value;
          var username = document.getElementById('username').value;
          //引用user对象
          var user = api.require("user");

          //使用register方法，将数据写入数据库中
          user.register({
            username:username,
            password:password,
          },function(ret,err){

            if(ret){
              api.alert({
                  title: '注册成功',
                  buttons:['确定'],
                  msg: 'testmsg',
              }, function(ret, err){
                  if( ret.buttonIndex == 1 ){
                       api.closeWin();
                  }
              });

            }else{
              api.toast({
                  msg: 'err.message',
                  duration: 2000,
                  location: 'middle'
              });

            }
          });
          open_login();
        }


        //打开登录窗口
        function open_login(){
          //获取用户账号密码的值
          var password = document.getElementById('password').value;
          var username = document.getElementById('username').value;

          api.openWin({
              name: 'login',
              url: 'login.html',
              opaque: true,
              vScrollBarEnabled: false,
              pageParam: {
                  username: username,
                  password: password
              }
          });

        }




</script>
